Open topic with navigation

JavaScript

Block Group:	Browser API
Block Icon:

Executes JavaScript from specified files or URLs.

To configure a JavaScript block, you specify a path or URL to a JavaScript file and the name of an initialization function. The initialization function is executed once when the page is loaded. The initialization function must return a function, which is executed whenever the block is invoked. Typically, the block is invoked by an event that is bound to the block's Invoke property. The invoked function must take meta, getValue, and setValue as parameters. The meta parameter provides access to the block's parent component. For example, to change the background color, your Javascript can set meta.element.style.background to 'red'.

The following code outline shows the basic required routines.

	
function initJS() {
	console.log("Initialized!"); //Executed once when page is loaded
	function onInvoke(meta, getValue, setValue) {
		console.log("Invoked!");    //Executed whenever block's Invoke property is triggered,
	}
	return onInvoke;
}

The JavaScript function that is invoked can accept input and return output by means of added parameters. To add a parameter, click the plus sign located at the top right of the JavaScript block. To delete a parameter, right-click it in the right-hand panel of the dataflow window and select Remove Parameter.

You can bind these added properties to properties of other components to implement application logic that is driven by your JavaScript. In your JavaScript, use getValue and setValue to read and write parameter values. For example:

	
setValue('a', newValue);
getValue('a');

To create a blank JavaScript file for a JavaScript block, enter the desired file name and path in the block's scriptPath property and click the scriptData loadScript button. The scriptData dialog is displayed, preloaded with a code outline showing the required logic. Enter your code and click Apply to save it.

The JavaScript block differs from the Script block as follows:

• The Script block provides access to the page model, using syntax such as @parent. The JavaScript block does not, but it does provide access to external APIs.
• The cdee for the JavaScript block is stored in a file. The code for the Script block is stored in a text property in the block itself.

Input/Output Properties

These properties can take input and give output.

• invoke (trigger)
• autoRun (boolean)
• scriptPath (string)
• initFunction (string)

invoke loads the JavaScript in the global source for the page and runs the function returned by the init function.

autoRun specifies when the invoked function runs, as follows.

• TRUE: The script runs when the page is loaded, every time the script is changed and every time any property is changed.
• FALSE: The script runs only when the invoke property is triggered.

scriptPath specifies the path to the JavaScript file. It can be a Solution Builder file path relative to the root, or it can be a URL. The file extension must be .js.

initFunction specifies the name of the initialization function in the file.

Examples

The follow examples illustrate basic approaches to scripting using the JavaScript block.

Hello World

This example is based on a simple script that outputs a string, which can be bound to a text component.

Before you start, create a file that contains the following code and save it in your project folder as "test.js".

function initTestJs(){
	var count = 0;
	function onInvoke(meta, getValue, setValue){
		setValue('a', 'hello world ' + count++);
	}
	return onInvoke;
}

To implement this example, perform the following steps:

1. Add a text component to the Stage and open its dataflow.
2. Add a JavaScript block to the dataflow and set its properties as follows:
   • scriptPath: test.js
   • initFunction initTestJs
3. Add a string property named "a" to the JavaScript block (click the "+" to add).
4. Bind the JavaScript block's "a" property to the text component's Text property.
5. Select the text component and display its Action tab. Click the expander and bind its onClick event to the JavaScript block's Invoke property.

Switch to Preview mode and verify that, when you click the text component, it displays the "Hello World" message and increments the counter.

Display a Marker on a Google Map Component

To add a marker in Australia on a Google Map component, add a JavaScript block to the dataflow of a Google Map component and configure it to call the following script. For the JavaScript bock's initFunction, specify initMapForDGLux.

function initMap(map) {
	var myLatLng = new google.maps.LatLng(-25.363, 131.044);
	var marker = new google.maps.Marker({
	position: myLatLng,
	map: map,
	title: 'Hello World!' });
}
			
function initMapForDGLux() {
	function runScript(meta, getValue, setValue) {
		if (meta.gmap != null) {
		initMap(meta.gmap);
		}
	}
	return runScript;	
}

Videos